<template>
	<div class="navmenu">
		<div class="header">
			<aside class="head1">
				<span>图书管理系统</span>
			</aside>
			<aside class="head2">
				<span>欢迎进入图书管理系统网站 登录时间：{{time}}</span>
			</aside>
			<aside class="head3">
				<span>
					<img class="myhead" :src="`http://127.0.0.1/api/public/showimg/${img}`" />
					<p>{{uname}}</p>
					<router-link to="/home">首页</router-link>
				</span>
			</aside>
		</div>
		<div class="body">
			<el-row class="tac">
				<el-col class="col">
					<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
						<el-submenu index="1">
							<template slot="title">
								<span>热度图片</span>
							</template>
							<el-menu-item-group>
								<router-link to="/admin/hotpic">
									<el-menu-item index="1-1">热度图片</el-menu-item>
								</router-link>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="2">
							<template slot="title">
								<span>类型管理</span>
							</template>
							<el-menu-item-group>
								<router-link to="/admin/type">
									<el-menu-item index="2-1">一二类型</el-menu-item>
								</router-link>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title">

								<span>商品管理</span>

							</template>
							<el-menu-item-group>
								<router-link to="/admin/booklist">
									<el-menu-item index="3-1">商品列表</el-menu-item>
								</router-link>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="4">
							<template slot="title">
								<span>用户管理</span>
							</template>
							<el-menu-item-group>
								<router-link to="/admin/mine">
									<el-menu-item index="4-1">冻结密码重置</el-menu-item>
								</router-link>

								<router-link to="/admin/user">
									<el-menu-item index="4-2">管理员添加</el-menu-item>
								</router-link>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="5">
							<template slot="title">
								<span>订单管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="5-1">订单详情</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-col>
			</el-row>
			<el-container>
				<el-main>
					<router-view></router-view>
				</el-main>
				<el-footer style="height: 30px;">
					<i class="el-icon-setting"></i>
					<span>后台管理</span>
				</el-footer>
			</el-container>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Admin',
		data() {
			return {
				uname: window.localStorage.getItem('name'),
				time: this.getTime(),
				img: window.localStorage.getItem('img')
			}
		},
		computed: {},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			getTime() {
				let now = new Date();
				let Y = now.getFullYear() + '-';
				let M = (now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1) + '-';
				let D = now.getDate() + ' ';
				return Y + M + D;
			}
		},
		mounted() {
			console.log(this.uname);
			console.log(this.img);
		}
	}
</script>

<style scoped>
	body,
	html,
	.el-container {
		height: 100%;
	}

	a {
		color: white;
		margin-left: 10px;
	}

	span {
		color: white;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.header {
		background-color: #282b33;
		height: 56px;
		display: flex;
		justify-content: space-between;
	}

	.header aside {
		margin-left: 65px;
		margin-top: 15px;
	}

	.head1 span {
		color: #009688;
	}

	.head2 {
		width: 400px;
		text-align: center;
		border-bottom: #5fb878 4px solid;
	}

	.head3 span {
		margin-right: 55px;
		display: flex;
	}

	.head3 p {
		margin-left: 12px;
	}

	.myhead {
		margin-top: -5px;
		height: 35px;
		width: 35px;
		border-radius: 50%;
	}


	.body {
		display: flex;
		height: 93.5%;
	}

	.el-footer span {
		color: #000000;
		margin-top: 10px;
	}

	.el-main {
		overflow: hidden;
		text-align: center;
		/* margin-top: 230px; */
	}

	.el-footer {
		width: 100%;
		height: 2.5rem;
		position: fixed;
		bottom: 0;
		line-height: 2.5rem;
		background-color: #eeeeee;
		color: #000000;
		line-height: 30px;
	}

	.navmenu {
		height: 100%;
	}

	.tac {
		width: 220px;
		height: 100%;
		background-color: #393d49;
	}

	.tac .el-menu-vertical-demo,
	li {
		background-color: #282b33;
		color: #7f7c73;
		width: 220px;
	}

	.el-menu-vertical-demo {
		height: 100%;

	}

	.el-col-12 {
		height: 100%;
		width: 50%;
	}

	.el-menu-item.is-active {
		color: #ffffff;
		background-color: #009688;
	}

	.el-menu-item:hover {
		background-color: #393d49;
	}

	.is-opened.is-active {
		background-color: #393d49;
	}

	.is-opened:hover {
		background-color: #393d49;
	}
</style>